<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    ul {
      padding-bottom: 50px;
      box-sizing: border-box;
    }
    h2{
      font-size: 20px;
      padding: 10px;
      box-sizing: border-box;
    }
    .text{
      display: flex;
      margin-left: 20px;
      margin-bottom: 6px;
    }
    span{
      flex-shrink: 0;
      margin-right: 10px;
    }
  </style>
</head>
<body>
    <ul>
      <li>
        <h2>html2canvas绘制海报等问题</h2>
        <div class="text">
          <span>1.</span>
          <p>请勿将要绘制的dom区域图片设置成背景图，ios不兼容背景图。</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>所有海报内容都要通过position定位到其父盒子，iphone12不通过定位内容绘制会出现偏移，会出现海报有侧边白条。</p>
        </div>
        <div class="text">
          <span>3.</span>
          <p>默认背景图先显示出来了，请求接口获取二维码后使用canvas绘制完海报覆盖到最上面，导致页面闪烁。可以先将海报底图元素使用定位，left: -100%将其隐藏，使用display: none和opacity: 0均无法正确绘制海报</p>
        </div>
        <div class="text">
          <span>4.</span>
          <p>可以通过给具体img标签增加load事件，图片加载完成之后再触发生成海报，多张图片时可链式调用，防止未加载完绘制出现背景空白</p>
        </div>
        <div class="text">
          <span>5.</span>
          <p>生成成功后通过canvas.toDataURL("image/jpeg", 0.3)返回base64，image/jpeg比"image/png"等其他格式相比生成文件更小，注意图片压缩优化</p>
        </div>
      </li>

      <li>
        <h2>video兼容问题</h2>
        <div class="text">
          <span>1.</span>
          <p>ios(iPhone11 14.5版本)真机在QQ浏览器定时器(setInterval)无法清除，改用setTimeout + 循环代替。</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>video在播放或暂停时，优先级最高，设置z-index无效，可以通过在外出加个盒子，设置显示隐藏</p>
        </div>
      </li>

      <li>
        <h2>极光魔链（第三方通过短链 打开或下载 app的工具）</h2>
        <div class="text">
          <span>1.</span>
          <p>JM初始化时，需要确保id=download的a标签渲染完成，JM可以在父组件初始化，id=download的a标签也可以写在子组件里，只要确保初始化之前有对应的a标签即可。多个id=
          download的a标签，只有第一个生效。如果JM对应的a标签在孙子组件里，JM初始化放在父组件不生效</p>
        </div>
      </li>

      <li>
        <h2>transition动画在ios上最小化页面再次打开时，动画和图片消失</h2>
        <div class="text">
          <span>1.</span>
          <p>首先检查图片高度是否有问题，transition做放大缩小动画时，如果只有一个图片执行了动画，在ios上有这样问题。可以使用两张重叠图片，一起放大缩小，其中一张做opacity从0到1的动画效果</p>
        </div>
      </li>

      <li>
        <h2>小程序的swiper组件，在iphoneXS MAX左滑图片被切割</h2>
        <div class="text">
          <span>1.</span>
          <p>通过调整前边距、后边距，加上放大缩小，可以实现官方swiper中的异性slider效果。iphoneXS MAX左滑时会出现最右侧图片显示不完整的问题，可以通过缩小前后边距修复，但是与ui图会有一定的偏差。</p>
        </div>
      </li>

      <li>
        <h2>swiper插件问题</h2>
        <div class="text">
          <span>1.</span>
          <p>开启循环切换，swiper只走一遍，可以给swiper一个初始值，或者给swiper组件加个判断v-if="arr.length>0"</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>在苹果12MAX小程序上 由于swipe轮播图在刚开始加载的3、4秒会把屏幕撑开，造成页面左右滑动，随后恢复正常。暂未发现更好的解决方式。h5也有这样的问题，在根节点添加overflow-x: hidden;即可</p>
        </div>
      </li>

      <li>
        <h2>挽留弹框问题</h2>
        <div class="text">
          <span>1.</span>
          <p>因为导航守卫实现挽留弹框有问题，因此采用window.addEventListener("popstate", ()=>{}, false)去实现。注意如果用户进入页面不做任何操作，点击返回依旧不会触发挽留弹框。</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>该方法暂不支持app IOS系统手势返回，左上角返回可以正常触发</p>
        </div>
      </li>

      <li>
        <h2>监听页面的显示隐藏</h2>
        <div class="text">
          <span>1.</span>
          <p>let hiddenProperty =
          "hidden" in document
          ? "hidden"
          : "webkitHidden" in document
          ? "webkitHidden"
          : "mozHidden" in document
          ? "mozHidden"
          : null;</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>document.addEventListener("visibilitychange", () => {
            if (document[hiddenProperty]) {
            // console.log("页面隐藏了");
            } else {
            // console.log("页面显示了");
            }
            })</p>
        </div>
        <div class="text">
          <span>3.</span>
          <p>由于兼容性原因，请确保使用document.addEventListener而不是window.addEventListener，Safari&lt;14仅支持前者</p>
        </div>
        <div class="text">
          <span>4.</span>
          <p>Safari7不支持以上事件，ios可以改用window.onpageshow方法。</p>
        </div>
        <div class="text">
          <span>5.</span>
          <p>在ios真机QQ浏览器还是不能返回刷新页面，暂无更好解决方案</p>
        </div>
      </li>

      <li>
        <h2>vue中this.$router.push不跳转问题（概率极小）</h2>
        <div class="text">
          <span>1.</span>
          <p>可能由于路由懒加载的问题，删除路由懒加载</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>可以在配置文件查找config.plugins.delete('prefetch')，删除即可</p>
        </div>
      </li>

      <li>
        <h2>弹框出现时滑动穿透问题</h2>
        <div class="text">
          <span>1.</span>
          <p>弹框出现时，H5端：document.body.style.overflow = "hidden";  document.body.style.position = "fixed";</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>弹框关闭时，document.body.style.overflow = ""; document.body.style.position = "";</p>
        </div>
        <div class="text">
          <span>3.</span>
          <p>小程序，可以在弹框组件上加catchtouchmove="()=>{}"</p>
        </div>
      </li>

      <li>
        <h2>图片上传后，旋转图片问题</h2>
        <div class="text">
          <span>1.</span>
          <p>exif.js方法兼容ios13.4之前的版本和安卓，ios13.4之后的版本不再需要做处理ios会自动处理</p>
        </div>
        <div class="text">
          <span>2.</span>
          <p>ios可以选择上传图片大小，如果是竖屏拍照的相片不是选择原图上传，图片将会默认旋转，暂时没有解决方法</p>
        </div>
      </li>
      
      <li>
        <h2>部分元素不显示</h2>
        <div class="text">
          <span>1.</span>
          <p>class，id中尽量不出现ad等与广告相关的英文单词，可能会被浏览器拦截，导致该元素不显示</p>
        </div>
      </li>
    </ul>
    <script>
        
    </script>
</body>
</html>